<template>
	<el-row class="board-page-wrapper">
		<section class="query-container">
			<el-row :gutter="10">
				<el-col :span="6">
					<span class="query-label">学年</span>
					<el-select size="small" v-model="query.schoolYear">
						<el-option v-for="(item, index) in studyYearList" :label="item.dictLabel"
							:value="item.dictLabel" :key="item.dictLabel"></el-option>
					</el-select>
				</el-col>
				<el-col :span="6">
					<span class="query-label">学期</span>
					<el-select size="small" v-model="query.semester">
						<el-option v-for="(item, index) in studyWeekList" :label="item.dictLabel"
							:value="item.dictLabel" :key="item.dictLabel"></el-option>
					</el-select>
					</el-select>
				</el-col>
				<el-col :span="6">
					<span class="query-label">考试名称</span>
					<el-select size="small" v-model="query.examinationName">
						<el-option v-for="(item, index) in examNameList" :label="item.label" :value="item.id"
							:key="item.id"></el-option>
					</el-select>
				</el-col>
				<el-col :span="6">
					<span class="query-label">考试日期</span>
					<el-date-picker v-model="query.examinationDate" type="date" size="small" placeholder="选择日期" value-format='yyyy-MM-dd'>
					</el-date-picker>
				</el-col>
			</el-row>

			<el-row :gutter="10">
				<el-col :span="6">
					<span class="query-label">考试编号</span>
					<el-select size="small" v-model="query.examinationPaper">
						<el-option v-for="(item, index) in testNameList" :label="item.label" :value="item.id"
							:key="item.id"></el-option>
					</el-select>
				</el-col>
				<el-col :span="6">
					<span class="query-label">考试地点</span>
					<el-select size="small" v-model="query.examinationAddress">
						<el-option v-for="(item, index) in testAddressList" :label="item.label" :value="item.id"
							:key="item.id"></el-option>
					</el-select>
				</el-col>
				<el-col :span="6">
					<span class="query-label">课程</span>
					<el-select size="small" v-model="query.course">
						<el-option v-for="(item, index) in courseList" :label="item.label" :value="item.id"
							:key="item.id"></el-option>
					</el-select>
				</el-col>
				<el-col :span="6">
					<span class="query-label">教学班</span>
					<el-select size="small" v-model="query.classes">
						<el-option v-for="(item, index) in teachingList" :label="item.label" :value="item.id"
							:key="item.id"></el-option>
					</el-select>
				</el-col>
			</el-row>

			<el-row :gutter="10">
				<el-col :span="6">
					<span class="query-label">开课学院</span>
					<el-select size="small" v-model="query.beginCollege">
						<el-option v-for="(item, index) in openCollegeList" :label="item.dictLabel"
							:value="item.dictLabel" :key="item.dictLabel"></el-option>
					</el-select>
				</el-col>
				<el-col :span="6">
					<span class="query-label">考试方式</span>
					<el-select size="small" v-model="query.testWay">
						<el-option v-for="(item, index) in testModeList" :label="item.dictLabel" :value="item.dictLabel"
							:key="item.dictLabel"></el-option>
					</el-select>
				</el-col>
				<el-col :span="6">
					<span class="query-label">年级</span>
					<el-select size="small" v-model="query.grade">
						<el-option v-for="(item, index) in gradeList" ::label="item.dictLabel" :value="item.dictLabel"
							:key="item.dictLabel"></el-option>
					</el-select>
				</el-col>
				<el-col :span="6">
					<span class="query-label">学生学院</span>
					<el-select size="small" v-model="query.collegeStudents">
						<el-option v-for="(item, index) in studentCollegeList" :label="item.label" :value="item.id"
							:key="item.id"></el-option>
					</el-select>
				</el-col>
			</el-row>

			<el-row :gutter="10">
				<el-col :span="6">
					<span class="query-label">专业</span>
					<el-select size="small" v-model="query.professional">
						<el-option v-for="(item, index) in majorList" :label="item.label" :value="item.id"
							:key="item.id"></el-option>
					</el-select>
				</el-col>
				<el-col :span="6">
					<span class="query-label">班级</span>
					<el-select size="small" v-model="query.classAndGrade">
						<el-option v-for="(item, index) in classList" :label="item.label" :value="item.id"
							:key="item.id"></el-option>
					</el-select>
				</el-col>
				<el-col :span="12" style="display: flex;flex-direction: row-reverse;">
					<el-button size="small" style="margin-left: 10px;" @click="resetQuery">清空</el-button>
					<el-button size="small" @click='btn()'>搜索</el-button>
				</el-col>
			</el-row>
		</section>
		<section class="board-table-wrapper">
			<el-table :data="tableData" :border="true" style="width: 100%" ref="table">
				<el-table-column type="selection" width="45" align="center"> </el-table-column>
				<el-table-column prop="id" label="学年" align="center"> </el-table-column>
				<el-table-column prop="month" label="学期" align="center"> </el-table-column>
				<el-table-column prop="departName" label="考试名称" align="center"> </el-table-column>
				<el-table-column prop="name" label="开课学院" align="center"> </el-table-column>
				<el-table-column prop="idCard" label="学生学院" align="center"> </el-table-column>
				<el-table-column prop="levelSalary" label="课程名称" align="center"> </el-table-column>
				<el-table-column prop="postSalary" label="试卷编号" align="center"> </el-table-column>
				<el-table-column prop="serviceAllowance" label="开始时间" align="center"> </el-table-column>
				<el-table-column prop="achieveAllowance" label="考试地点" align="center"> </el-table-column>
				<el-table-column prop="achieveAllowance" label="考试人数" align="center"> </el-table-column>
				<el-table-column prop="achieveAllowance" label="主监考教师" align="center"> </el-table-column>
			</el-table>
		</section>
	</el-row>
</template>

<script>
	import{getProctor} from "@/api/public/index.js"
	export default {
		data() {
			return {
				query: {
					schoolYear: '', //学年
					semester: "", //学期
					testWay: "", //考试方式，
					beginCollege: '', //开课学院
					grade: "", //年级
					professional:"",//专业
					classAndGrade:"",//班级
					collegeStudents:"",//学生学院
					classes:"",//教学班
					course:"",//课程
					examinationAddress:"",//考试地点
					examinationPaper:"",//考试编号
					examinationDate:"",//考试日期
					examinationName:"全部",//考试名称
					pageNum1:1,
					pageSize1:10

				},

				studyYearList: [],
				studyWeekList: [],
				examNameList: [{
					label:"全部",
					id:1,
				}],
				testNameList: [],
				testAddressList: [],
				courseList: [],
				teachingList: [],
				openCollegeList: [],
				testModeList: [],
				gradeList: [],
				studentCollegeList: [],
				majorList: [],
				classList: [],
				tableData: [{
					id: 1010206020,
					month: '20201221',
					departName: '致远楼B602'
				}]
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.$refs.table.doLayout() //解决表格错位
			})

			this.content_data('school_year_type')
			this.content_data('campus_type')
			this.content_data('keekly_type')
			this.content_data('week_type')
			this.content_data('section_type')
			this.content_data('semester_type')
			this.content_data('test_way_type')
			this.content_data('begin_college_type')
			this.content_data('grade_type')
		},
		methods: {
			resetQuery() {
				this.query = {}
			},
			content_data(type) {
				this.getDicts(type).then(res => {
					var obj = {}
					if (res.code === 200) {

						switch (type) {
							/* 学年 */
							case 'school_year_type':
								this.studyYearList = res.data
								break;
								/* 校区 */
							case 'campus_type':
								this.schoolList = res.data
								break;
								/* 周次 */
							case 'keekly_type':
								this.weekTimeList = res.data
								break;
								/* 星期 */
							case 'week_type':
								this.weeklist = res.data
								break;
								/* 节次 */
							case 'section_type':
								this.sectionlist = res.data
								break;
								/* 学期 */
							case 'semester_type':
								this.studyWeekList = res.data
								break;
								/* 考试方式 */
							case 'test_way_type':
								this.testModeList = res.data
								break;
								/* 开课学院 */
							case 'begin_college_type':
								this.openCollegeList = res.data
								break;
								/* 年纪 */

							case 'grade_type':
								this.gradeList = res.data
								break;
							default:
								break;
						}
					}
				})
			},
			btn(){
				getProctor(this.query).then(res=>{
					if(res.code==200){
						this.$message({
						         showClose: true,
						         message: res.msg,
						         type: 'success'
						       });
					}else{
						this.$message({
						        showClose: true,
						        message: res.msg
						      });
					}
				})
			}
		},
		components: {}
	}
</script>

<style lang="scss" scoped>
	.board-page-wrapper {
		padding: 10px;

		.query-container {
			padding: 10px 30px;
			display: flex;
			margin-left: -15px;
			margin-right: -15px;
			flex-wrap: wrap;

			.el-row {
				line-height: 32px;
				padding: 5px 15px;
				width: 100%;

				.el-col {
					display: flex;
					flex-wrap: nowrap;

					.query-label {
						width: 70px;
						text-align: right;
						margin-right: 5px;
					}

					.el-input,
					.el-select {
						width: calc(100% - 70px);
					}

					.two-box {
						display: flex;
					}

					.option-box {
						display: flex;
						width: 100%;
						flex: 1;
						justify-content: space-between;
					}
				}
			}

			&>div {
				line-height: 32px;
				padding: 0 15px;
			}
		}
	}
</style>
